var sng1 = document.querySelectorAll(".sng li")
var geshou = document.querySelectorAll('.geshou');
var index = 0
// 点击
function xianshi() {
    for (var j = 0; j < geshou.length; j++) {
        sng1[j].classList.remove('hover');
        geshou[j].classList.remove('xianshi');
    }
    sng1[index].classList.add('hover');
    geshou[index].classList.add('xianshi');
}
sng1[0].onclick = function () {
    index = 0;
    xianshi();
}
sng1[1].onclick = function () {
    index = 1;
    xianshi();
}
sng1[2].onclick = function () {
    index = 2;
    xianshi();
}
sng1[3].onclick = function () {
    index = 3;
    xianshi();
}
sng1[4].onclick = function () {
    index = 4;
    xianshi();
}
sng1[5].onclick = function () {
    index = 5;
    xianshi();
}
sng1[6].onclick = function () {
    index = 6;
    xianshi();
}
sng1[7].onclick = function () {
    index = 7;
    xianshi();
}
sng1[8].onclick = function () {
    index = 8;
    xianshi();
}
sng1[9].onclick = function () {
    index = 9;
    xianshi();
}
sng1[10].onclick = function () {
    index = 10;
    xianshi();
}


// 全部
var quanbuqian = document.querySelector('.quanbuqian'); //前二十
var quanbuhou = document.querySelector('.quanbuhou'); //后三十
var str1 = '';
for (var i = 0; i < quanbu1.length; i++) {
    str1 += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${quanbu1[i].imgs}">
            <i>${quanbu1[i].shuzhi}</i>
        </a>
        <strong><a href="javascript">${quanbu1[i].name}</a>
        </strong>
    </li>`

}
quanbuqian.innerHTML = str1;
//    后二十
var str2 = '';
for (var i1 = 0; i1 < quanbu2.length; i1++) {
    str2 += `
    <li class="odd">
        <span class="ran">${quanbu2[i1].paiming}</span>
        <span class="up"></span>
        <a title="何鹏" href="javascript" class="text">${quanbu2[i1].name}</a>
    </li>
    `
}
quanbuhou.innerHTML = str2;
var huayuqian = document.querySelector('.huayuqian'); //前二十
var huayuhou = document.querySelector('.huayuhou'); //后三十
// 华语男
var strm1 = '';
for (var im = 0; im < huayuman.length; im++) {
    strm1 += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${huayuman[im].imgs}">
            <i>${huayuman[im].shuzhi}</i>
        </a>
        <strong><a href="javascript">${huayuman[im].name}</a>
        </strong>
    </li>`
}
huayuqian.innerHTML = strm1;
//    后二十
var strm2 = '';
for (var i1m = 0; i1m < huayuman1.length; i1m++) {
    strm2 += `
    <li class="odd">
        <span class="ran">${huayuman1[i1m].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${huayuman1[i1m].name}</a>
    </li>
    `
}
huayuhou.innerHTML = strm2;
// 华语女
var huayuqiang = document.querySelector('.huayuqiang'); //前二十
var huayuhoug = document.querySelector('.huayuhoug'); //后三十
var strg1 = '';
for (var ig = 0; ig < huayugirl.length; ig++) {
    strg1 += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${huayugirl[ig].imgs}">
            <i>${huayugirl[ig].shuzhi}</i>
        </a>
        <strong><a href="javascript">${huayugirl[ig].name}</a>
        </strong>
    </li>`
}
huayuqiang.innerHTML = strg1;
//    后二十
var strg2 = '';
for (var i1g = 0; i1g < huayugirl1.length; i1g++) {
    strg2 += `
    <li class="odd">
        <span class="ran">${huayugirl1[i1g].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${huayugirl1[i1g].name}</a>
    </li>
    `
}
huayuhoug.innerHTML = strg2;
// 华语组合
var huayuqiano = document.querySelector('.huayuqiano'); //前二十
var huayuhouo = document.querySelector('.huayuhouo'); //后三十
var stro1 = '';
for (var io = 0; io < hauyucombination.length; io++) {
    stro1 += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${hauyucombination[io].imgs}">
            <i>${hauyucombination[io].shuzhi}</i>
        </a>
        <strong><a href="javascript">${hauyucombination[io].name}</a>
        </strong>
    </li>`
}
huayuqiano.innerHTML = stro1;
//    后二十
var stro2 = '';
for (var i1o = 0; i1o < hauyucombination1.length; i1o++) {
    stro2 += `
    <li class="odd">
        <span class="ran">${hauyucombination1[i1o].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${hauyucombination1[i1o].name}</a>
    </li>
    `
}
huayuhouo.innerHTML = stro2;

// 日韩
// 日韩男
var rhqianm = document.querySelector('.rhqianm'); //前二十
var rhhoum = document.querySelector('.rhhoum'); //后三十
var rhm = '';
for (var km = 0; km < rihanman.length; km++) {
    rhm += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${rihanman[km].imgs}">
            <i>${rihanman[km].shuzhi}</i>
        </a>
        <strong><a href="javascript">${rihanman[km].name}</a>
        </strong>
    </li>`
}
rhqianm.innerHTML = rhm;
//    后二十
var rhm1 = '';
for (var km1 = 0; km1 < rihanman1.length; km1++) {
    rhm1 += `
    <li class="odd">
        <span class="ran">${rihanman1[km1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${rihanman1[km1].name}</a>
    </li>
    `
}
rhhoum.innerHTML = rhm1;
// 日韩女
var rhqiang = document.querySelector('.rhqiang'); //前二十
var rhhoug = document.querySelector('.rhhoug'); //后三十
var rhg = '';
for (var kg = 0; kg < rihangirl.length; kg++) {
    rhg += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${rihangirl[kg].imgs}">
            <i>${rihangirl[kg].shuzhi}</i>
        </a>
        <strong><a href="javascript">${rihangirl[kg].name}</a>
        </strong>
    </li>`
}
rhqiang.innerHTML = rhg;
//    后二十
var rhg1 = '';
for (var kg1 = 0; kg1 < rihangirl.length; kg1++) {
    rhg1 += `
    <li class="odd">
        <span class="ran">${rihangirl[kg1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${rihangirl[kg1].name}</a>
    </li>
    `
}
rhhoug.innerHTML = rhg1;
// 日韩组合
var rhqiano = document.querySelector('.rhqiano'); //前二十
var rhhouo = document.querySelector('.rhhouo'); //后三十
var rho = '';
for (var ko = 0; ko < rihancombination.length; ko++) {
    rho += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${rihancombination[ko].imgs}">
            <i>${rihancombination[ko].shuzhi}</i>
        </a>
        <strong><a href="javascript">${rihancombination[ko].name}</a>
        </strong>
    </li>`
}
rhqiano.innerHTML = rho;
//    后二十
var rho1 = '';
for (var ko1 = 0; ko1 < rihancombination1.length; ko1++) {
    rho1 += `
    <li class="odd">
    <span class="ran">${rihancombination1[ko1].paiming}</span>
    <span class="up"></span>
    <a href="javascript" class="text">${rihancombination1[ko1].name}</a>
</li>
    `
}
rhhouo.innerHTML = rho1;
// 欧美
// 欧美男
var omqianm = document.querySelector('.omqianm'); //前二十
var omhoum = document.querySelector('.omhoum'); //后三十
var omm = '';
for (var m= 0; m < omeigril.length; m++) {
    omm += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${omeiman[m].imgs}">
            <i>${omeiman[m].shuzhi}</i>
        </a>
        <strong><a href="javascript">${omeiman[m].name}</a>
        </strong>
    </li>`
}
omqianm.innerHTML = omm;
//    后二十
var omm1 = '';
for (var m1 = 0; m1 < omeiman1.length; m1++) {
    omm1 += `
    <li class="odd">
        <span class="ran">${omeiman1[m1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${omeiman1[m1].name}</a>
    </li>
    `
}
omhoum.innerHTML = omm1;
// 欧美女
var omqiang = document.querySelector('.omqiang'); //前二十
var omhoug = document.querySelector('.omhoug'); //后三十
var omg = '';
for (var g = 0; g < omeigril.length; g++) {
    omg += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${omeigril[g].imgs}">
            <i>${omeigril[g].shuzhi}</i>
        </a>
        <strong><a href="javascript">${omeigril[g].name}</a>
        </strong>
    </li>`
}
omqiang.innerHTML = omg;
//    后二十
var omg1 = '';
for (var g1 = 0; g1 < omeigril1.length; g1++) {
    omg1 += `
    <li class="odd">
        <span class="ran">${omeigril1[g1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${omeigril1[g1].name}</a>
    </li>
    `
}
omhoug.innerHTML = omg1;
// 欧美组合
var omqiano = document.querySelector('.omqiano'); //前二十
var omhouo = document.querySelector('.omhouo'); //后三十
var omo = '';
for (var o = 0; o < omeicombination.length; o++) {
    omo += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${omeicombination[o].imgs}">
            <i>${omeicombination[o].shuzhi}</i>
        </a>
        <strong><a href="javascript">${omeicombination[o].name}</a>
        </strong>
    </li>`
}
omqiano.innerHTML = omo;
//    后二十
var omo1 = '';
for (var o1 = 0; o1 < omeicombination1.length; o1++) {
    omo1 += `
    <li class="odd">
        <span class="ran">${omeicombination1[o1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${omeicombination1[o1].name}</a>
    </li>
    `
}
omhouo.innerHTML = omo1;
// 其他
var qtq = document.querySelector('.qtq'); //前二十
var qth = document.querySelector('.qth'); //后三十
var qt = '';
for (var q = 0; q < rests.length; q++) {
    qt += `<li class="qliebiao">
        <a class="pic" href="javascript">
            <img alt="" src="${rests[q].imgs}">
            <i>${rests[q].shuzhi}</i>
        </a>
        <strong><a href="javascript">${rests[q].name}</a>
        </strong>
    </li>`
}
qtq.innerHTML = qt;
//    后二十
var qt1 = '';
for (var q1 = 0; q1 < rests1.length; q1++) {
    qt1 += `
    <li class="odd">
        <span class="ran">${rests1[q1].paiming}</span>
        <span class="up"></span>
        <a href="javascript" class="text">${rests1[q1].name}</a>
    </li>
    `
}
qth.innerHTML = qt1;